<template>
  <div id="content">
    <div class="container personContent">
      <div style="background: #3d3b4f; color:#f0f0f4; padding: 10px 30px;">
        <h3>{{$store.state.res.title}}</h3>
        <div>
          <span style="margin-right: 10px">
            <i class="el-icon-time" style="margin-right: 5px"></i>
            {{new Date($store.state.res.updateTime).toLocaleDateString()}}
          </span>
          <span style="margin-right: 10px">
            <i class="el-icon-view" style="margin-right: 5px"></i>
            {{$store.state.res.heat}}
          </span>
          <span style="margin-right: 10px">
            <i class="el-icon-download" style="margin-right: 5px"></i>
            {{$store.state.res.favorites}}
          </span>
          <span style="margin-right: 10px">
            <i class="el-icon-star-off" style="margin-right: 5px"></i>
            {{$store.state.res.download}}
          </span>
        </div>
      </div>
      <el-container style="min-height: 68vh">
        <el-main style="padding: 30px">
          <div class="ql-snow ql-editor" v-html="content"></div>
        </el-main>
      </el-container>
      <Footer />
    </div>
    <SideBar />
  </div>
</template>

<script>
import Footer from "@/components/subComponents/Footer";
import SideBar from "@/components/subComponents/SideBar";

import { myMixin } from "@/assets/js/mixin";
export default {
  mixins: [myMixin],
  components: {
    Footer,
    SideBar
  },
  data() {
    return {
      content: ""
    };
  },
  mounted() {
    this.$axios
      .get(
        this.$const.domain +
          "/v1/file/getContentHtml?contentId=" +
          this.$route.params.id
      )
      .then(res => {
        this.content = res.data;
      })
      .catch(error => {
        console.log(error);
        this.$message.error("文章已经不存在了");
      });
    let username = this.$store.state.user.username;
    let uri =
      this.$const.domain +
      "/v1/recommend/changeHeat?contentId=" +
      this.$route.params.id +
      (username == null ? "" : "&username=" + username);

    this.$axios.put(uri).catch();
  }
};
</script>